<template>
  <view>
    <view class="fab-login-box">
      <view class="item" v-for="(item,index) in servicesList" :key="index"
        @click="item.path?toPage(item.path):login_before(item.id,false)">
        <image class="logo" :src="item.logo" mode="scaleToFill"></image>
        <text class="login-title">{{item.text}}</text>
      </view>
    </view>
  </view>
</template>
<script>
  import config from '@/uni_modules/uni-id-pages/config.js'
  //前一个窗口的页面地址。控制点击切换快捷登录方式是创建还是返回
  import {
    store,
    mutations
  } from '@/uni_modules/uni-id-pages/common/store.js'
  let allServicesList = []
  export default {
    computed: {
      agreements() {
        if (!config.agreements) {
          return []
        }
        let {
          serviceUrl,
          privacyUrl
        } = config.agreements
        return [{
            url: serviceUrl,
            title: "用户服务协议"
          },
          {
            url: privacyUrl,
            title: "隐私政策条款"
          }
        ]
      },
      agree: {
        get() {
          return this.getParentComponent().agree
        },
        set(agree) {
          return this.getParentComponent().agree = agree
        }
      }
    },
    data() {
      return {
        servicesList: [{
            "id": "username",
            "text": "账号登录",
            "logo": "/uni_modules/uni-id-pages/static/login/uni-fab-login/user.png",
            "path": "/uni_modules/uni-id-pages/pages/login/login-withpwd"
          },
          {
            "id": "smsCode",
            "text": "短信验证码",
            "logo": "/uni_modules/uni-id-pages/static/login/uni-fab-login/sms.png",
            "path": "/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=smsCode"
          },
          {
            "id": "weixin",
            "text": "微信登录",
            "logo": "/uni_modules/uni-id-pages/static/login/uni-fab-login/weixin.png",
          },
          // #ifndef MP-WEIXIN
          {
            "id": "apple",
            "text": "苹果登录",
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/apple.png",
          },
          {
            "id": "univerify",
            "text": "一键登录",
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/univerify.png",
          },
          {
            "id": "taobao",
            "text": "淘宝登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/taobao.png",
          },
          {
            "id": "facebook",
            "text": "脸书登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/facebook.png",
          },
          {
            "id": "alipay",
            "text": "支付宝登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/alipay.png",
          },
          {
            "id": "qq",
            "text": "QQ登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/qq.png",
          },
          {
            "id": "google",
            "text": "谷歌登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/google.png",
          },
          {
            "id": "douyin",
            "text": "抖音登录", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/douyin.png",
          },
          {
            "id": "sinaweibo",
            "text": "新浪微博", //暂未提供该登录方式的接口示例
            "logo": "/uni_modules/uni-id-pages/static/app-plus/uni-fab-login/sinaweibo.png",
          }
          // #endif
        ],
        univerifyStyle: { //一键登录弹出窗的样式配置参数
          "fullScreen": true, // 是否全屏显示，true表示全屏模式，false表示非全屏模式，默认值为false。
          "backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
          "buttons": { // 自定义登录按钮
            "iconWidth": "45px", // 图标宽度（高度等比例缩放） 默认值：45px
            "list": []
          },
          "privacyTerms": {
            "defaultCheckBoxState": false, // 条款勾选框初始状态 默认值： true
            "textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB
            "termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3
            "prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
            "suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
            "privacyItems": []
          }
        }
      }
    },
    watch: {
      agree(agree) {
        this.univerifyStyle.privacyTerms.defaultCheckBoxState = agree
      }
    },
    async created() {
      let servicesList = this.servicesList
      let loginTypes = config.loginTypes

      servicesList = servicesList.filter(item => {

        // #ifndef APP
        //非app端去掉apple登录
        if (item.id == 'apple') {
          return false
        }
        // #endif

        // #ifdef APP
        //去掉非ios系统上的apple登录
        if (item.id == 'apple' && uni.getSystemInfoSync().osName != 'ios') {
          return false
        }
        // #endif

        return loginTypes.includes(item.id)
      })
      //处理一键登录
      if (loginTypes.includes('univerify')) {
        this.univerifyStyle.privacyTerms.privacyItems = this.agreements
        //设置一键登录功能底下的快捷登录按钮
        servicesList.forEach(({
          id,
          logo,
          path
        }) => {
          if (id != 'univerify') {
            this.univerifyStyle.buttons.list.push({
              "iconPath": logo,
              "provider": id,
              path //路径用于点击快捷按钮时判断是跳转页面
            })
          }
        })
      }
      //	console.log(servicesList);

      //去掉当前页面对应的登录选项
      this.servicesList = servicesList.filter(item => {
        let path = item.path ? item.path.split('?')[0] : '';
        return path != this.getRoute(1)
      })
    },
    methods: {
      getParentComponent() {
        // #ifndef H5
        return this.$parent;
        // #endif

        // #ifdef H5
        return this.$parent.$parent;
        // #endif
      },
      setUserInfo(e) {
        console.log('setUserInfo', e);
      },
      getRoute(n = 0) {
        let pages = getCurrentPages();
        if (n > pages.length) {
          return ''
        }
        return '/' + pages[pages.length - n].route
      },
      toPage(path, index = 0) {
        //console.log('比较', this.getRoute(1),this.getRoute(2), path)
        if (this.getRoute(1) == path.split('?')[0] && this.getRoute(1) ==
          '/uni_modules/uni-id-pages/pages/login/login-withoutpwd') {
          //如果要被打开的页面已经打开，且这个页面是 /uni_modules/uni-id-pages/pages/index/index 则把类型参数传给他
          let loginType = path.split('?')[1].split('=')[1]
          uni.$emit('uni-id-pages-setLoginType', loginType)
        } else if (this.getRoute(2) == path) { // 如果上一个页面就是，马上要打开的页面，直接返回。防止重复开启
          uni.navigateBack();
        } else if (this.getRoute(1) != path) {
          if (index === 0) {
            uni.navigateTo({
              url: path,
              animationType: 'slide-in-left',
              complete(e) {
                // console.log(e);
              }
            })
          } else {
            uni.redirectTo({
              url: path,
              animationType: 'slide-in-left',
              complete(e) {
                // console.log(e);
              }
            })
          }
        } else {
          console.log('出乎意料的情况,path：' + path);
        }
      },
      async login_before(type, navigateBack = true, options = {}) {
        console.log(type);
        //提示空实现
        if (["qq",
            "xiaomi",
            "sinaweibo",
            "taobao",
            "facebook",
            "google",
            "alipay",
            "douyin",
          ].includes(type)) {
          return uni.showToast({
            title: '该登录方式暂未实现，欢迎提交pr',
            icon: 'none',
            duration: 3000
          });
        }

        //检查当前环境是否支持这种登录方式
        // #ifdef APP
        let isAppExist = true
        await new Promise((callback) => {
          plus.oauth.getServices(oauthServices => {
            let index = oauthServices.findIndex(e => e.id == type)
            if (index != -1) {
              isAppExist = oauthServices[index].nativeClient
              callback()
            } else {
              return uni.showToast({
                title: '当前设备不支持此登录，请选择其他登录方式',
                icon: 'none',
                duration: 3000
              });
            }
          }, err => {
            throw new Error('获取服务供应商失败：' + JSON.stringify(err))
          })
        })
        // #endif

        if (
          // #ifdef APP
          !isAppExist
          // #endif

          //非app端使用了，app特有登录方式
          // #ifndef APP
          ["univerify", "apple"].includes(type)
          // #endif

        ) {
          return uni.showToast({
            title: '当前设备不支持此登录，请选择其他登录方式',
            icon: 'none',
            duration: 3000
          });
        }

        //判断是否需要弹出隐私协议授权框
        let needAgreements = (config?.agreements?.scope || []).includes('register')
        if (type != 'univerify' && needAgreements && !this.agree) {
          let agreementsRef = this.getParentComponent().$refs.agreements
          return agreementsRef.popup(() => {
            this.login_before(type, navigateBack, options)
          })
        }

        // #ifdef H5
        if (type == 'weixin') {
          // console.log('开始微信网页登录');
          // let redirectUrl = location.protocol +'//'+
          // 				document.domain +
          // 				(window.location.href.includes('#')?'/#':'') +
          // 				'/uni_modules/uni-id-pages/pages/login/login-withoutpwd?is_weixin_redirect=true&type=weixin'
          // #ifdef VUE2
          const baseUrl = process.env.BASE_URL
          // #endif
          // #ifdef VUE3
          const baseUrl = import.meta.env.BASE_URL
          // #endif

          let redirectUrl = location.protocol +
            '//' +
            location.host +
            baseUrl.replace(/\/$/, '') +
            (window.location.href.includes('#') ? '/#' : '') +
            '/uni_modules/uni-id-pages/pages/login/login-withoutpwd?is_weixin_redirect=true&type=weixin'

          // console.log('redirectUrl----',redirectUrl);
          let ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            // console.log('在微信公众号内');
            return window.open(`https://open.weixin.qq.com/connect/oauth2/authorize?
										appid=${config.appid.weixin.h5}
										&redirect_uri=${encodeURIComponent(redirectUrl)}
										&response_type=code
										&scope=snsapi_userinfo
										&state=STATE&connect_redirect=1#wechat_redirect`);

          } else {
            // console.log('非微信公众号内');
            return location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${config.appid.weixin.web}
											&redirect_uri=${encodeURIComponent(redirectUrl)}
											&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`
          }
        }
        // #endif

        uni.showLoading({
          mask: true
        })

        if (type == 'univerify') {
          let univerifyManager = uni.getUniverifyManager()
          let clickAnotherButtons = false
          let onButtonsClickFn = async res => {
            console.log('点击了第三方登录，provider：', res, res.provider, this.univerifyStyle.buttons.list);
            clickAnotherButtons = true
            let checkBoxState = await uni.getCheckBoxState();
            // 同步一键登录弹出层隐私协议框是否打勾
            // #ifdef VUE2
            this.agree = checkBoxState[1].state
            // #endif
            // #ifdef VUE3
            this.agree = checkBoxState.state
            // #endif
            let {
              path
            } = this.univerifyStyle.buttons.list[res.index]
            if (path) {
              if (this.getRoute(1).includes('login-withoutpwd') && path.includes('login-withoutpwd')) {
                this.getParentComponent().showCurrentWebview()
              }
              this.toPage(path, 1)
              closeUniverify()
            } else {
              if (this.agree) {
                closeUniverify()
                setTimeout(() => {
                  this.login_before(res.provider)
                }, 500)
              } else {
                uni.showToast({
                  title: "你未同意隐私政策协议",
                  icon: 'none',
                  duration: 3000
                });
              }
            }
          }

          function closeUniverify() {
            uni.hideLoading()
            univerifyManager.close()
            // 取消订阅自定义按钮点击事件
            univerifyManager.offButtonsClick(onButtonsClickFn)
          }
          // 订阅自定义按钮点击事件
          univerifyManager.onButtonsClick(onButtonsClickFn)
          // 调用一键登录弹框
          return univerifyManager.login({
            "univerifyStyle": this.univerifyStyle,
            success: res => {
              this.login(res.authResult, 'univerify')
            },
            fail(err) {
              console.log(err)
              if (!clickAnotherButtons) {
                uni.navigateBack()
              }
              // uni.showToast({
              // 	title: JSON.stringify(err),
              // 	icon: 'none',
              // 	duration: 3000
              // });
            },
            complete: async e => {
              uni.hideLoading()
              //同步一键登录弹出层隐私协议框是否打勾
              // this.agree = (await uni.getCheckBoxState())[1].state
              // 取消订阅自定义按钮点击事件
              univerifyManager.offButtonsClick(onButtonsClickFn)
            }
          })
        }

        if (type === 'weixinMobile') {
          return this.login({
            phoneCode: options.phoneNumberCode
          }, type)
        }

        uni.login({
          "provider": type,
          "onlyAuthorize": true,
          // #ifdef APP
          "univerifyStyle": this.univerifyStyle,
          // #endif
          success: async e => {
            if (type == 'apple') {
              let res = await this.getUserInfo({
                provider: "apple"
              })
              Object.assign(e.authResult, res.userInfo)
              uni.hideLoading()
            }
            this.login(type == 'weixin' ? {
              code: e.code
            } : e.authResult, type)
          },
          fail: async (err) => {
            console.log(err);
            uni.hideLoading()
          }
        })
      },
      login(params, type) { //联网验证登录
        // console.log('执行登录开始----');
        console.log({
          params,
          type
        });
        //toLowerCase
        let action = 'loginBy' + type.trim().replace(type[0], type[0].toUpperCase())
        const uniIdCo = uniCloud.importObject("uni-id-co", {
          customUI: true
        })
        uniIdCo[action](params).then(result => {
            uni.showToast({
              title: '登录成功',
              icon: 'none',
              duration: 2000
            });
            // #ifdef H5
            result.loginType = type
            // #endif
            console.log("登陆", action, result);
            mutations.loginSuccess(result)
          })
          .catch(e => {
            uni.showModal({
              content: e.message,
              confirmText: "知道了",
              showCancel: false
            });
          })
          .finally(e => {
            if (type == 'univerify') {
              uni.closeAuthView()
            }
            uni.hideLoading()
          })
      },
      async getUserInfo(e) {
        return new Promise((resolve, reject) => {
          uni.getUserInfo({
            ...e,
            success: (res) => {
              resolve(res);
            },
            fail: (err) => {
              uni.showModal({
                content: JSON.stringify(err),
                showCancel: false
              });
              reject(err);
            }
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  .fab-login-box,
  .item {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
  }

  /* #endif */

  .fab-login-box {
    flex-direction: row;
    flex-wrap: wrap;
    width: 750rpx;
    justify-content: space-around;
    position: fixed;
    left: 0;
  }

  .item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200rpx;
    cursor: pointer;
  }

  /* #ifndef APP-NVUE */
  @media screen and (min-width: 690px) {
    .fab-login-box {
      max-width: 500px;
      margin-left: calc(50% - 250px);
    }

    .item {
      height: 160rpx;
    }
  }

  @media screen and (max-width: 690px) {
    .fab-login-box {
      bottom: 10rpx;
    }
  }

  /* #endif */

  .logo {
    width: 60rpx;
    height: 60rpx;
    max-width: 40px;
    max-height: 40px;
    border-radius: 100%;
    border: solid 1px #F6F6F6;
  }

  .login-title {
    text-align: center;
    margin-top: 6px;
    color: #999;
    font-size: 10px;
    width: 70px;
  }
</style>